<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="预约商品" :border-bottom="false"></u-navbar>
		</view>
		<view class="info container_br" v-if="goodsInfo">
			<view class="goodsPop">
				<view class="top flc">
					<view class="img" v-if="goodsInfo.images_format">
						<image :src="goodsInfo.images_format[0]" mode="widthFix"
							style="width: 200rpx; border-radius: 15rpx;"></image>
					</view>
					<view class="info ml2">
						<view class="name">
							{{goodsInfo.name}}{{goodsInfo.skusInfo?goodsInfo.skusInfo.sku_name_arr[0]:''}}
						</view>
						<view class="price">
							￥{{goodsInfo.min_price||goodsInfo.price}}
						</view>
						<view class="stock jsbc">
							<view class="num_t">
								数量
							</view>
							<view class="num">
								{{goodsInfo.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="line mtb2" style="height: 2rpx; width: 670rpx;background-color: #dedede;">
			</view>
			<view class="price jsbc">
				<view class="price_t">
					预约价格
				</view>
				<view class="price">
					￥{{goodsInfo.reservation_price}}
				</view>
			</view>
		</view>
		<view class="remakr container_br">
			<view class="title">
				订单备注
			</view>
			<view class="text mtb2">
				<textarea v-model="content" placeholder="请输入备注信息" style="width: 670rpx;min-height: 200rpx;" />
			</view>
		</view>
		<view class="tpis">
			*预约成功之后，预约定价步退还，在订单支付页面抵扣
		</view>
		<view class="pays jsbc">
			<view class="left">
				<span>实付</span> <span class="ml2">￥{{(goodsInfo.reservation_price*goodsInfo.num).toFixed(2)}}</span>
			</view>
			<view class="right" @click="pay">
				提交订单
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true" border-radius="28">
			<view class="popBox">
				<view class="total_price">
					<span class="icon">￥</span>{{(goodsInfo.reservation_price*goodsInfo.num).toFixed(2)}}
				</view>
				<view class="payItemView">
					<view class="payTypeTitme">请选择支付方式</view>
					<view class="payTypeItem jsbc" @click="onSelecteds(1)">
						<view class="left flc">
							<u-icon name="/static/icon/weixin.png" size="50"></u-icon>
							<view class="payTypeTitle">微信支付</view>
						</view>

						<view class="right">
							<u-icon name="/static/icon/selected.png" size="40" v-if="payType == 1"></u-icon>
							<u-icon name="/static/icon/unselected2.png" size="40" v-else></u-icon>
						</view>
					</view>
				</view>
				<view class="pay" @click="onOrderPayment">
					立即支付
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		useCartStore
	} from '../../stores/cart';
	import {
		toast,
		toastC
	} from '@/utils/common';
	import {
		createRorder,
		yyPay
	} from '@/api/index.js'
	export default {
		data() {
			return {
				goodsInfo: useCartStore().cartList,
				content: "",
				show: false,
				payType: ""
			};
		},
		methods: {
			onSelecteds(i) {
				this.payType = i
			},
			onOrderPayment() {

			},
			pay() {
				if (this.goodsInfo.reservation_price > 0) {
					this.show = true
				} else {
					createRorder({
						goods_id: this.goodsInfo.id,
						goods_number: this.goodsInfo.num,
						goods_sku_id:this.goodsInfo.skusInfo?this.goodsInfo.skusInfo._id:''
					}).then(res => {
						if (res.code == 200) {
							toastC('支付成功')
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/order/order'
								})
							}, 300)
						} else {
							toast(res.message)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.goodsPop {
		.price {
			font-weight: bold;
			font-size: 32rpx;
			color: #FA453C;
		}

		.name {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
			width: 450rpx;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.stock {
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.remakr {
		.title {
			font-size: 32rpx;
			font-weight: 600;
		}
	}

	.tpis {
		color: #666;
		width: 750rpx;
		padding: 20rpx;
		font-size: 26rpx;
		box-sizing: border-box;
	}

	.pays {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		box-shadow: 2rpx 0 2rpx rgba(0, 0, 0, 0.1);

		.ml2 {
			color: #FA453C;
		}

		.right {
			height: 60rpx;
			width: 180rpx;
			line-height: 60rpx;
			text-align: center;
			color: #fff;
			background-color: #FA453C;
			border-radius: 25rpx;
		}
	}

	.popBox {
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		height: 720rpx;
		position: relative;

		.total_price {
			margin-top: 40rpx;
			text-align: center;
			font-size: 56rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #333333;

			.icon {
				font-size: 36rpx;
			}
		}

		.payTypeTitle {
			margin-left: 20rpx;
		}

		.pay {
			position: absolute;
			bottom: 40rpx;
			left: 30rpx;
			width: 690rpx;
			height: 80rpx;
			background: #6BC665;
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
		}

	}
</style>